<template>
  <div class="resource-type-item">
    <div class="type-header">{{ info.productDistribute }}</div>
    <div id="product" class="item-main"></div>
  </div>
</template>

<script>
  import { defineComponent, toRefs, watch } from 'vue';
  import { useI18n } from '@common/locales';
  import * as echarts from 'echarts';
  export default defineComponent({
    name: 'ProductDistribute',
    props: {
      productData: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const t = useI18n().t;
      watch(
        () => props.productData,
        (newProps) => {
          methods.initEcharts(newProps);
        },
      );
      const state = {
        info: {
          productDistribute: t('resourceBoard.productDistribute'),
        },
      };
      const methods = {
        initEcharts(echartData) {
          let productDom = document.getElementById('product');
          var myEchart = echarts.init(productDom);
          myEchart.clear();
          let xData = [];
          let yData = [];
          echartData.sort((a, b) => {
            return a.count - b.count;
          });
          echartData.forEach((item) => {
            xData.push(item.count);
            yData.push(item.SY_PRODUCT_NAME);
          });
          let option = {
            grid: {
              top: '20',
              bottom: '40',
              left: '22%',
              right: '10%',
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b} {c}',
            },
            xAxis: {
              max: 'dataMax',
            },
            yAxis: {
              type: 'category',
              data: yData,
              axisLabel: {
                show: true,
                fontSize: 14,
                rich: {
                  flag: {
                    fontSize: 25,
                    padding: 5,
                  },
                },
              },
            },
            series: [
              {
                realtimeSort: false,
                type: 'bar',
                seriesLayoutBy: 'column',
                data: xData,
                label: {
                  show: true,
                  position: 'right',
                },
              },
            ],
          };
          option && myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   myEchart.resize();
          // });
        },
      };
      return {
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped lang="less">
  .resource-type-item {
    width: calc((100% - 40px) / 3);
    height: 370px;
    background: #fff;
    border-radius: 4px;
    .type-header {
      width: 100%;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      font-size: 16px;
      font-weight: bold;
      color: #3f3f3f;
      box-sizing: border-box;
      border-bottom: 1px solid #e6e6e6;
    }
    .item-main {
      width: 100%;
      height: 310px;
    }
  }
</style>
